<script setup>
import Icon from "@components/Icon";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {commonStore} from "@/store/common";
const commonStore1 = commonStore()
const icon = ref('User')

const done = function () {
  ElMessage.success("复制成功！")
}


</script>

<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <el-card class="box-card">
        <template #header>
          <span>欢迎使用{{commonStore1.systemName}}</span>
        </template>
       <el-row>
         <el-col :span="24" style="margin-bottom: 10px;">
           <el-alert title="sk-admin是一款小微企业后台管理系统脚手架，可方便快速搭建应用" type="info" :closable="false" />
         </el-col>
         <el-col :span="24" style="margin-bottom: 10px;">
           <el-alert title="支持微信公众号后台开发" type="success" :closable="false" />
         </el-col>
       </el-row>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
      <el-card class="box-card">
        <template #header>
          <span>角色权限管理</span>
        </template>
        <el-carousel height="150px">
          <el-carousel-item>
            <div style="width: 100%;text-align: center" class="bg-info">
              <h2>自定义菜单，权限，角色和用户</h2>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div style="width: 100%;text-align: center" class="bg-success">
              <h2>菜单，api的访问权限控制</h2>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <span>内置功能</span>
        </template>
        <div style="color:#606266;">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="success" style="width: 100%;text-align: center">用户管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="warning" style="width: 100%;text-align: center">角色管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="info" style="width: 100%;text-align: center">权限管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="danger" style="width: 100%;text-align: center">部门管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag style="width: 100%;text-align: center">国际化</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="success" style="width: 100%;text-align: center">数据字典管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="warning" style="width: 100%;text-align: center">部门管理</el-tag>
            </el-col>
            <el-col :span="8" style="margin-bottom: 10px;">
              <el-tag type="info" style="width: 100%;text-align: center">文件管理</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
      <el-card class="box-card">
        <template #header>
          <span>各式图标</span>
        </template>
        <div style="color:#606266;">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="8">
              <div class="flex-center height100">
                图标选择器
              </div>
            </el-col>
            <el-col :span="13">
              <Icon v-model="icon"></Icon>
            </el-col>
            <el-col :span="3">
              <el-button type="text" v-clipboard:copy="icon" v-clipboard:success="done">复制</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<style lang="scss" scoped>

.bg-blue {
  background-color: #409eff;
}

.bg-success {
  background-color: #67c23a;
}

.bg-warning {
  background-color: #e6a23c;
}

.bg-danger {
  background-color: #f56c6c;
}

.bg-info {
  background-color: #909399;
}

.demo-color-box {
  border-radius: 4px;
  padding: 10px;
  height: 54px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
}


.box-card {
  width: 100%;
  height: 250px;
  margin: 5px;
}

.el-carousel__item h2 {
  color: #475669;
  font-size: 20px;
  opacity: 0.75;
  line-height: 160px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.big-alert {
  height: 500px;

  svg {
    height: 150px;
    width: 150px;
  }

  .text-div {
    margin-left: 10px;

    .title {
      font-size: 18px;
    }

    .sub-title {
      font-size: 14px;

      &:deep(.el-link--inner) {
        font-size: 14px;
      }
    }
  }
}

.alert-success {
  color: #67C23A;
}

.alert-info {
  color: #909399;
}

.alert-danger {
  color: #F56C6C;
}

</style>
